<template>
  <view class="order-item">
    <view class="top" @click="skipDetail">
      <view class="user">
        <text class="name">{{name}}</text>
        <view class="phone" @click.stop="handleTel">
          <image class="icon" src="/static/icon/phone-icon.png"></image>
          <text>{{phone}}</text>
        </view>
      </view>
      <view v-if="mode === 'order'" class="status" :class="{ warning: status == '2' || status == '4' }">
        {{statusDict(status)}}
      </view>
    </view>
    <view class="content" @click="skipDetail">
      <view class="sub">
        <view class="label">服务项目：</view>
        <view class="value">{{project}}</view>
      </view>
      <view class="sub">
        <view class="label">上门时间：</view>
        <view class="value">{{time}}</view>
      </view>
      <view class="sub">
        <view class="label">服务地址：</view>
        <view class="value">{{address}}</view>
      </view>
      <view class="sub">
        <view class="label">服务价格：</view>
        <view class="value price">
          <text class="unit">￥</text>
          <text class="val">{{price || '0.00'}}</text>
        </view>
      </view>
    </view>
    <view
      v-if="(mode === 'order' && (status == '2' || status == '4')) || mode === 'task'"
      class="bot"
      :class="{
        unaccept: mode === 'order' && status == '2',
        undone: mode === 'order' && status == '4'
      }"
    >
      <view v-if="mode === 'task'" class="btn-box">
        <view v-if="userInfo.type == '1'" class="btn-item btn-item-1" @click="dispatch">派单</view>
        <view class="btn-item btn-item-2" @click="grab">我要抢单</view>
      </view>
      <view v-else-if="status == '2'" class="accept-btn" @click="accept">确认接单</view>
      <view v-else class="done-btn" @click="skipConfirm">确认完成</view>
    </view>
  </view>
</template>

<script>
  import { order_status } from '@/utils/dict/'
  import { ConfirmOrdersApi, GrabOrdersApi } from '@/api/'
  
  export default {
    name:"order-item",
    props: ['mode', 'uid', 'name', 'phone', 'status', 'project', 'time', 'address', 'price'],
    data() {
      return {
        userInfo: {}
      };
    },
    mounted() {
      this.userInfo = uni.getStorageSync('userInfo')
    },
    methods: {
      statusDict(val) {
        const target = order_status.find(s => s.value == val)
        return target.label
      },
      // 拨号
      handleTel() {
        uni.makePhoneCall({
          phoneNumber: this.phone
        })
      },
      // 跳转详情
      skipDetail() {
        uni.navigateTo({
          url: `/subpages/detail/detail?id=${this.uid}&mode=${this.mode}`
        })
      },
      // 确认完成
      skipConfirm() {
        uni.navigateTo({
          url: `/subpages/confirm/confirm?id=${this.uid}`
        })
      },
      // 确认接单
      accept() {
        uni.showModal({
          content: '是否确认接单？',
          success: (res) => {
            if (res.confirm) {
              ConfirmOrdersApi({ order_id: this.uid }).then(() => {
                uni.showToast({
                  icon: 'success',
                  title: '接单成功',
                  success: () => {
                    setTimeout(() => {
                      this.$emit('refresh')
                    }, 1200)
                  }
                })
              }).catch(() => {})
            }
          }
        })
      },
      // 抢单
      grab() {
        uni.showModal({
          content: '是否确认抢单？',
          success: (res) => {
            if (res.confirm) {
              GrabOrdersApi({ order_id: this.uid }).then(() => {
                uni.showToast({
                  icon: 'success',
                  title: '抢单成功',
                  success: () => {
                    setTimeout(() => {
                      this.$emit('refresh')
                    }, 1200)
                  }
                })
              }).catch(() => {})
            }
          }
        })
      },
      // 派单
      dispatch() {
        uni.navigateTo({
          url: `/subpages/dispatch/dispatch?id=${this.uid}`
        })
      },
    }
  }
</script>

<style lang="scss">
.order-item {
  width: 690rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 1px 8rpx 1px rgba(0,0,0,0.05);
  border-radius: 10rpx;
  margin: 20rpx auto;
  box-sizing: border-box;
  padding: 0 28rpx;
  .top {
    height: 94rpx;
    position: relative;
    @include line;
    @include flex;
    .user {
      flex: 1;
      @include flex(row,center,flex-start);
      .name {
        font-size: 36rpx;
        color: #333333;
        margin-right: 18rpx;
        font-weight: bold;
      }
      .phone {
        height: 36rpx;
        background: #0EB3CB;
        border-radius: 15rpx 5rpx 5rpx 5rpx;
        @include flex;
        padding: 0 16rpx;
        font-size: 24rpx;
        color: #FFFFFF;
        .icon {
          width: 22rpx;
          height: 22rpx;
          margin-right: 8rpx;
        }
      }
    }
    .status {
      height: 42rpx;
      border-radius: 6rpx;
      border: 1px solid #ddd;
      box-sizing: border-box;
      @include flex;
      font-size: 24rpx;
      color: #999;
      padding: 0 26rpx;
      &.warning {
        color: $uni-color-warning;
        border-color: $uni-color-warning;
      }
    }
  }
  .content {
    overflow: hidden;
    padding: 8rpx 0;
    .sub {
      @include flex(row,flex-start);
      font-size: 24rpx;
      line-height: 40rpx;
      margin: 16rpx 0;
      .label {
        color: #999;
      }
      .value {
        flex: 1;
        color: #222;
        &.price {
          color: #DA0205;
          .unit {
            font-size: 26rpx;
          }
          .val {
            font-size: 34rpx;
            font-weight: bold;
          }
        }
      }
    }
  }
  .bot {
    position: relative;
    @include line(top);
    padding: 30rpx 0;
    display: flex;
    align-items: center;
    &.unaccept {
      justify-content: center;
    }
    &.undone {
      justify-content: flex-end;
    }
    .accept-btn {
      width: 464rpx;
      height: 72rpx;
      font-size: 26rpx;
      color: #FFFFFF;
      background: linear-gradient(1deg, #20659C, #4590CC);
      border-radius: 36rpx;
      @include flex;
    }
    .done-btn {
      width: 180rpx;
      height: 72rpx;
      border-radius: 36rpx;
      border: 1px solid #20659C;
      box-sizing: border-box;
      @include flex;
      font-size: 26rpx;
      color: #20659C;
    }
    .btn-box {
      @include flex(row,center,space-between);
      width: 100%;
      .btn-item {
        width: 306rpx;
        height: 72rpx;
        border-radius: 36rpx;
        font-size: 26rpx;
        box-sizing: border-box;
        @include flex;
        &.btn-item-1 {
          color: $uni-color-primary;
          border: 1px solid $uni-color-primary;
        }
        &.btn-item-2 {
          background: linear-gradient(1deg, #20659C, #4590CC);
          color: #FFFFFF;
        }
      }
    }
  }
}
</style>